<?php defined('SYSPATH') OR die('No direct access allowed.'); ?>
<style type="text/css">
	table.container{
		border-width: 1px;
    }

	table.container tr{
		height: 15px;
	}
</style>
<script type="text/javascript">
	dojo.require("dijit.form.DateTextBox");

	dojo.require("dijit.dijit"); 
    dojo.require("dijit._Calendar");
</script>
<script type="text/javascript">
$(document).ready(function() {
	$("#preview").click(function() {
		 //document.getElementById('resultData').innerHTML = '';
		var condition = document.getElementById('date1').value.split("/");
		var conditionValue = '';
		if((condition != null) && (condition.length >= 3)){
			if(document.getElementById('reportCondition').value == 'day'){
				conditionValue = condition[1];
			}else if(document.getElementById('reportCondition').value == 'month'){
				conditionValue = condition[0];
			}else if(document.getElementById('reportCondition').value == 'year'){
				conditionValue = condition[2];
			}
		}

		
		var uri = ISS.lang.getBasePath()+'index.php/admin/report/ajax_page/'
					   + document.getElementById('reportType').value + '/'
					   + document.getElementById('reportCondition').value + '/' 
					   + conditionValue;

		ISS.Ajax.Caller.request(uri, null);
	});
});
</script>
<script type="text/javascript">
           var chart3 ;
           var d1 = [2, 2, 20, 3, 4, 5, 5, 7] ;
           var d2 = [10, 2, 20, 3, 40, 5, 5, 7] ;
           var d3 = [10, 20, 20, 30, 40, 50, 5, 7] ;

           var d4 = [1, 2, 20, 3, 4, 5, 5, 7] ;
           var d4label = {
               labels: [ { value: 1, text: "label1"},
                         { value: 2, text: "label2"},
                         { value: 3, text: "label3"},
                         { value: 4, text: "label4"},
                         { value: 5, text: "label5"},
                         { value: 6, text: "label6"},
                         { value: 7, text: "label7"},
                         { value: 8, text: "label8"}
                       ]
           } ;

			var d5label = {
               labels: [ { value: 1, text: "L1"},
                         { value: 2, text: "L2"},
                         { value: 3, text: "L3"},
                         { value: 4, text: "L4"},
                         { value: 5, text: "L5"},
                         { value: 6, text: "L6"},
                         { value: 7, text: "L7"},
                         { value: 8, text: "L8"}
                       ]
           } ;

           dojo.require("dojox.charting.Chart2D");

           makeCharts = function() {
               chart3 = new dojox.charting.Chart2D("reportChart");
               chart3.addPlot("default", {type: "Columns"});
               //chart3.addAxis("x", d4label);
               //chart3.addAxis("y", {vertical: true});
               //chart3.addSeries("Series 1", d4, {fill: "lightblue"}) ;
               //chart3.render() ;
           };

           dojo.addOnLoad(makeCharts);

           function PreviewReport() {
			   //alert('data ' + document.getElementById('resultData').innerHTML);
			   if(document.getElementById('resultData').innerHTML.length > 0){
				   var reportData;
				   eval("reportData=" + document.getElementById('resultData').innerHTML);
				   
				   chart3.addAxis("x", reportData.song);
				   chart3.addAxis("y", {vertical: true});
				   chart3.addSeries("Series 1", reportData.data, {fill: "lightblue"}) ;
				   chart3.render() ;
			   }
           }

</script>
 <form name="reportForm" action="<?php echo url::base(); ?>index.php/admin/report">
	 <div style="position: relative; left: 20px; ">
	 <div style="height: 10px;">&nbsp;</div>
	 <div style="color: white; font-size: 11pt; font-weight: bold;">Hyper Space Music Report</div>
	 <div style="height: 10px;">&nbsp;</div>
	  <div>
		<table class="container">
			<tr>
				<td>Report Category :</td>
				<td>
					<select style="width:150px" id="reportType">
						 <option value="download" selected="selected">Download</option>
						 <option value="vote">Vote</option>
					 </select>
				</td>
			</tr>
			<tr>
				<td>Report Condition :</td>
				<td>
					<select style="width:150px" id="reportCondition">
						 <option value="day" selected="selected">Daily</option>
						 <option value="month">Monthly</option>
						 <option value="year">Yearly</option>
					 </select>
				</td>
			</tr>
			<tr>
				<td>
					Selected date :
				</td>
				<td>
					<!-- <div dojoType="dijit._Calendar" 		onChange="dojo.byId('formatted').innerHTML=dojo.date.locale.format(arguments[0], {formatLength: 'full', selector:'date'})"> 
					 </div>
					 <p id="formatted">
					 </p>-->
					 <input type="text" name="date1" id="date1" value="" dojoType="dijit.form.DateTextBox"
						required="true" />
				</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="button" id="preview" value="Preview"/></td>
			</tr>
		</table>
	  </div>
	  
      <div id="reportData" style="display: none;">
			<span id="resultData"></span>
	 </div>
	 <div style="height: 5px;">&nbsp;</div>
	 <div id="reportChart" style="width: 550px; height: 350px;"></div> 
	 <div style="height: 10px;">&nbsp;</div>
	 </div>
 </form>
